<template>
    <div class="question-filter">
      <div class="filter-row">
        <div class="label">题型：</div>
        <div class="options">
          <el-radio-group v-model="type" @change="handleChange">
              <el-radio-button 
              v-for="item in filterOptions.questionTypes" 
              :key="item.value" 
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <div class="filter-row">
        <div class="label">难度：</div>
        <div class="options">
          <el-radio-group v-model="difficulty" @change="handleChange">
            <el-radio-button 
              v-for="item in filterOptions.difficulties" 
              :key="item.value" 
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <div class="filter-row">
        <div class="label">题类：</div>
        <div class="options">
          <el-radio-group v-model="category" @change="handleChange">
            <el-radio-button 
              v-for="item in filterOptions.categories" 
              :key="item.value" 
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
<!--   
      <div class="filter-row">
        <div class="label">来源：</div>
        <div class="options">
          <el-radio-group v-model="source" @change="handleChange">
            <el-radio-button 
              v-for="item in filterOptions.sources" 
              :key="item.value" 
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <div class="filter-row">
        <div class="label">能力类：</div>
        <div class="options">
          <el-radio-group v-model="ability" @change="handleChange">
            <el-radio-button 
              v-for="item in filterOptions.abilities" 
              :key="item.value" 
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <div class="filter-row">
        <div class="label">年份：</div>
        <div class="options">
          <el-radio-group v-model="year" @change="handleChange">
            <el-radio-button 
              v-for="item in filterOptions.years" 
              :key="item.value" 
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <div class="filter-row">
        <div class="label">排序：</div>
        <div class="options">
          <el-radio-group v-model="sort" @change="handleChange">
            <el-radio-button 
              v-for="item in filterOptions.sorts" 
              :key="item.value" 
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div> -->
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // 静态数据配置
  const filterOptions = {
    questionTypes: [
      { label: '全部', value: '' },
      { label: '选择题', value: '1' },
      { label: '填空题', value: '2' },
      { label: '判断题', value: '3' },
      { label: '计算题', value: '4' },
      { label: '应用题', value: '5' },
      { label: '操作题', value: '6' },
      { label: '解答题', value: '7' },
      { label: '连线题', value: '8' }
    ],
    difficulties: [
      { label: '全部', value: '' },
      { label: '易', value: 'easy' },
      { label: '较易', value: 'medium' },
      { label: '中档', value: 'medium-hard' },
      { label: '较难', value: 'hard' },
      { label: '难', value: 'very-hard' }
    ],
    categories: [
      { label: '全部', value: '' },
      { label: '典型题', value: '1' },
      { label: '好题集', value: '2' },
      { label: '常考题', value: '3' },
      { label: '压轴题', value: '4' },
      { label: '易错题', value: '5' },
      { label: '用户错题', value: '6' }
    ],
    // sources: [
    //   { label: '全部', value: '' },
    //   { label: '小升初真题', value: '1' },
    //   { label: '名校小升初', value: '2' },
    //   { label: '小升初模拟', value: '3' },
    //   { label: '小升初复习', value: '4' },
    //   { label: '期末试题', value: '5' },
    //   { label: '期中试题', value: '6' },
    //   { label: '月考试题', value: '7' },
    //   { label: '开学试题', value: '8' },
    //   { label: '单元测验', value: '9' },
    //   { label: '同步练习', value: '10' },
    //   { label: '竞赛试题', value: '11' },
    //   { label: '假期作业', value: '12' },
    //   { label: '小班指导', value: '13' }
    // ],
    // abilities: [
    //   { label: '全部', value: '' },
    //   { label: '数感', value: '1' },
    //   { label: '符号意识', value: '2' },
    //   { label: '空间观念', value: '3' },
    //   { label: '几何直观', value: '4' },
    //   { label: '数据分析观念', value: '5' },
    //   { label: '运算能力', value: '6' },
    //   { label: '推理能力', value: '7' },
    //   { label: '模型思想', value: '8' },
    //   { label: '应用意识', value: '9' },
    //   { label: '创新意识', value: '10' }
    // ],
    // years: [
    //   { label: '全部', value: '' },
    //   { label: '2024', value: '2024' },
    //   { label: '2023', value: '2023' },
    //   { label: '2022', value: '2022' },
    //   { label: '2021', value: '2021' },
    //   { label: '2020', value: '2020' }
    // ],
    // sorts: [
    //   { label: '综合排序', value: 'comprehensive' },
    //   { label: '试题难度', value: 'difficulty' }
    // ]
  }
  
  const emit = defineEmits(['change'])
  
  const type = ref('')
  const difficulty = ref('')
  const category = ref('')
  const source = ref('')
  const ability = ref('')
  const year = ref('')
  const sort = ref('comprehensive')
  
  const handleChange = () => {
    emit('change', {
      type: type.value,
      difficulty: difficulty.value,
      category: category.value,
      source: source.value,
      ability: ability.value,
      year: year.value,
      sort: sort.value
    })
  }
  </script>
  
  <style scoped>
  .question-filter {
    padding: 16px;
  }
  
  .filter-row {
    display: flex;
    margin-bottom: 20px;  /* 增加行间距 */
  }
  
  .filter-row:last-child {
    margin-bottom: 0;
  }
  
  .label {
    width: 70px;
    line-height: 32px;
    color: #606266;
  }
  
  .options {
    flex: 1;
  }
  
  :deep(.el-radio-button__inner) {
    padding: 6px 14px;
    border: none !important;
    background: transparent;
    color: #606266;
    border-radius: 16px !important;  /* 圆角效果 */
    transition: all 0.3s;
  }
  
  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    box-shadow: none !important;
  }
  
  :deep(.el-radio-button + .el-radio-button) {
    margin-left: 2px;  /* 按钮间距 */
  }
  
  /* 移除不需要的样式 */
  :deep(.el-radio-button:first-child .el-radio-button__inner),
  :deep(.el-radio-button:last-child .el-radio-button__inner) {
    border-radius: 16px !important;
  }
  </style>